import {defineComponent, ref} from "vue";
import {useRoute} from "vue-router";
import {storeToRefs} from "pinia";

import style from "./css/index.module.css"
import {InformationStore} from "@/stores/information";
import {formatDateTime} from "@/utils/utils";
import {ElMessage} from "element-plus";
import {CollectStore} from "@/stores/collect";

export default defineComponent({
    setup(){
        const {id} = useRoute().query

        const information_store = InformationStore()
        const collect_store =  CollectStore()
        const {informationInfo} = storeToRefs(information_store)
        const {collectInfo} = storeToRefs(collect_store)

        information_store.getInformationInfo(id)

        // 收藏
        const handleCollect = async () => {

            if(informationInfo.value.isCollect){
                const res = collect_store.deleteCollect(informationInfo.value.isCollect.id)
                if(res) ElMessage.success("取消成功！")
            }else{
                collectInfo.value.info_id = id
                const res = await collect_store.addCollect()
                if(res) ElMessage.success("收藏成功！")
            }
            information_store.getInformationInfo(id)
        }

        // 点赞+1
        const handleLove = async () => {
            const code = await information_store.updateInformationRecord(id, 'love')
            if (code === 0) return ElMessage.success("点赞成功！")
        }



        return () => {



            return <>
                <div className={style.container}>
                    <div className={style.information_title}>{informationInfo.value.info_title}</div>
                    <div className={style.bottom_box}>
                        <div className={style.time}>{formatDateTime(informationInfo.value.createdAt)}</div>
                        <div>
                            <div className={style.icons}>
                                <div className={style.zan}>
                                    <span>点赞数：</span>
                                    <span>{informationInfo.value?.record_info?.love}</span>
                                </div>
                                <div className={style.zan}>
                                    <span>点击数：</span>
                                    <span>{informationInfo.value?.record_info?.view}</span>
                                </div>
                            </div>
                            <div className={style.btns}>
                                {
                                    informationInfo.value.isCollect ? <div className={style.btn_active} onClick={handleCollect}>已收藏</div> : <div className={style.btn} onClick={handleCollect}>收藏</div>
                                }
                                <div className={style.btn} onClick = {handleLove}>点赞</div>
                            </div>
                        </div>
                    </div>
                    <div v-html={informationInfo.value.info_content}></div>
                </div>
            </>
        }
    }
})